<template>
  <div class="goods-item">
  <div @click="enter">
    <!-- <img :src="imgLink" @load="imgLoad"/> -->
    <img v-lazy="imgLink" @load="imgLoad"/>
    <div class="goods-info">
      <p>{{goodsData.title}}</p>
      <span class="price">{{goodsData.price}}</span>
      <span class="collect">{{goodsData.cfav}}</span>
    </div>
  </div>
  <span class="button" @click="deleteGood"><slot name="button"></slot></span>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {

       }
    },
    props:{
      goodsData:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    computed:{
      imgLink(){
        return this.goodsData.image||this.goodsData.show&&this.goodsData.show.img   //短的写前面
      }
    },
    created() {
      if(!this.goodsData.iid){
        this.goodsData.iid=this.goodsData.goodId
      }
    },
    methods:{
      imgLoad(){
        //此组件被复用，防止该组件向无关组件发送事件
        if(this.$route.path.indexOf('/home')!=-1){
          this.$bus.$emit('homeImgLoadOver')    //利用Vue实例充当事件总线，把事件发给home
        }
        else if(this.$route.path.indexOf('/detail')!=-1){
          this.$bus.$emit('detailImgLoadOver')
        }
        this.$bus.$emit('imgLoadOver')
      },
      enter(){
        console.log(this.goodsData);
        if(!this.goodsData.iid){
          this.goodsData.iid=this.goodsData.goodId
        }
        this.$bus.$emit('activeGood',this.goodsData)
        this.$router.push({
          path:'detail',
          query:{
            id:this.goodsData.iid
          }
        })
      },
      deleteGood(){
        if(!this.goodsData.iid){
          this.goodsData.iid=this.goodsData.goodId
        }
        console.log('oo',this.goodsData);
        this.$bus.$emit("deleteGood",this.goodsData.iid)
      }
    },
    components:{

    }
  }
</script>

<style scoped>
  button{
    width: 100%;
    color: white;
    background-color: rgb(55, 106, 217);
    padding: 4px 0px;
    border: none;
    box-shadow:0 0 1px 1px rgba(127, 127, 127, 0.5);
  }
  .goods-item {
    padding-bottom: 10px;
    position: relative;
    width: 48%;
  }

  .goods-item img {
    width: 100%;
    border-radius: 5px;
  }

  .goods-info {
    font-size: 12px;
    /* position: absolute; */
    margin-bottom: 5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
  }

  .goods-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }

  .goods-info .price {
    color: var(--color-high-text);
    margin-right: 20px;
  }

  .goods-info .collect {
    position: relative;
  }

  .goods-info .collect::before {
    content: '';
    position: absolute;
    left: -15px;
    top: -1px;
    width: 14px;
    height: 14px;
    background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
  }
</style>
